<template>
	<view>
		<view v-if="isLogin">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-container">
						<text class="txt-nick">{{nickName+"-["+uTypes[type-1]+"]"}}</text>
						<image :src="badges[type-1]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-user">{{userName+":"+email}}</text>
				</view>
			</view>
			<text class="iconfont icon-zhuxiao txt-logout" @click="clickLogout"></text>
			<view class="data-container">
				<!-- 点赞文章，使用滚动视图实现 -->
				<view class="data-title" @click="clickSwtich(0)">
					<text class="data-title-name">我点赞的{{goodCount}}篇文章</text>
					<text :class="status[0].open?'iconfont icon-sanjiaoshang ics-arrow':'iconfont icon-sanjiao_xia isc-arrow'"></text>
				</view>
				<scroll-view scroll-x v-if="status[0].open" class="scroll-scroll" scroll-with-animation="true" @scrolltolower="getMoreBlogs">
					<view class="scroll-item" v-for="(blog,index) in goodBlogs" :key="blog.id">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="data-container">
				<!-- 管理类别数据，使用文本标签 -->
				<view class="data-title" @click="clickSwtich(1)">
					<text class="data-title-name">我管理的{{categories.length}}个类别数据</text>
					<text :class="status[1].open?'iconfont icon-sanjiaoshang ics-arrow':'iconfont  icon-sanjiao_xia  isc-arrow'"></text>
				</view>

				<view class="category-container" v-if="status[1].open">
					<view class="category-item" v-for="(c,index) in categories" :key="c.id">
						<text class="category-name">{{c.name}}</text>
						<text :class="c.count==0?'bnt-category':'num-category'">{{c.count==0?'x':c.count}}</text>
					</view>
					<view class="category-item">
						<text class="iconfont icon-zengjiatianjiajiajian txt-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>

		</view>
		<login-dialog class="login" @login="afterLogin" ref="login"></login-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				avatar: '',
				userName: '',
				email: '',
				nickName: '',
				uTypes: ['管理员', '认证博主', '博客会员'],
				type: -1,
				badges: ['../../static/icons/badge0.png', '../../static/icons/badge1.png',
					'../../static/icons/badge2.png'
				],
				status: [{
					open: false
				}, {
					open: false
				}, {
					open: false
				}, {
					open: false
				}],
				goodCount: 0,
				goodIds: [],
				categories: [],
				page: 0,
				size: 2,
				goodBlogs:[],
			}
		},
		mounted() {
			if (getApp().globalData.token==0) {
				this.$refs.login.show()
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_login_status,this.afterLogin,this)
			this.isLogin=getApp().globalData.token.length>0
			if(this.isLogin){
				this.initUser()
			}
			this.getLocalGood()
		},
		onShow() {
			this.loadData()
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status,this)
		},
		methods: {
			afterLogin() {
				if (this.isLogin) {
					return
				}
				this.initUser()
				this.loadData()
			},
			initUser(){
				let app = getApp()
				this.isLogin = app.globalData.token.length > 0
				this.avatar = this.$params.host + app.globalData.avatar
				this.userName = app.globalData.userName
				this.email = app.globalData.email
				this.nickName = app.globalData.nickName
				this.type = app.globalData.type
			},
			
			loadData() {
				this.page = 0
				this.goodBlogs = []
				this.goodCount = -1
				this.getLocalGood()
				for (let i = 0; i<this.size; i++) {
					this.getMoreBlogs()
				}
				this.getCategories()
			},
			
			getCategories(){
				let url = this.$params.host+this.$params.action_categories
				this.$req.get(url,res=>{
					this.categories=[]
					url=this.$params.host+this.$params.action_category_count
					res.data.data.forEach(async(c)=>{
						let r=await 
						this.$req.request(url+c.id)
						if(res.data.success){
							let category={
								id:c.id,
								name:c.name,
								count:r.data
							}
							this.categories.push(category)
						}
					})
				})
			},
			clickSwtich(index) {
				let now = this.status[index].open
				this.status[index].open = !now
			},
			getLocalGood() {
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					this.goodIds = ids
				}
				this.goodCount = ids.length
			},
			getMoreBlogs() {
				if (this.goodCount >= 0 && this.goodBlogs.length == this.goodCount) {
					return
				}
				let url = this.$params.host + this.$params.action_top_blogs + this.goodIds[this.page++]
				this.$req.get(url, res => {
					// console.log(res);
					let blog = res.data.data
					blog.picture = this.$params.host + blog.picture
					this.goodBlogs=this.goodBlogs.concat(blog)
				})
			},
			clickGoBlog(id){
				uni.navigateTo({
					url: '../blog/blog?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickLogout(){
				let url=this.$params.host+this.$params.action_logout
				let app=getApp()
				let data={
					token:app.globalData.token
				}
				this.$req.postQuery(url,data,res=>{
					console.log(res);
					uni.showToast({
						title: res.data.message
					});
					if(res.data.success){
						app.globalData.token=''
						app.globalData.id=''
					    app.globalData.avatar='/static/icons/default_user.png'
						app.globalData.userName=''
					    app.globalData.email=''
					    app.globalData.nickName=''
						app.globalData.type=-1
						this.isLogin=false
						this.$refs.login.show()
						this.goodBlogs=[]
						this.page=0
						this.goodCount=-1
					}
				})
			}
		}

	}
</script>

<style>
	@import url("profile.css");
</style>